<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #span1{
            color: red;
        }
        p{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- <div>1</div>
    <div>2</div>
    <div>3</div>
    <p class="p1">4</p>
    <p class="p2">5</p>
    <p class="p3">6</p> -->

    <input type="text">
    <span>1</span>
    <span>2</span>
    <script>
        var inputs=document.getElementsByTagName("input");
        var spans=document.getElementsByTagName("span");
        inputs[0].oninput=function(){
            spans[0].innerText=inputs[0].value;
            spans[1].innerText=inputs[0].value;
        }

        // //根据标签名获取元素节点列表
        // var tag1=document.getElementsByTagName("div")[0];
        // tag1.innerHTML = "<span id='span1'>"+tag1.innerText+"</span>";

        // var tag2=document.getElementsByClassName("p1");
        // //在控制台输出类别名称集合
        // console.log(tag2[1]);
    </script>
</body>
</html>